import React, { useEffect, useState, useRef} from 'react'
import { Button, NavBar, Dropdown, Radio, Form, Input } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import "../style/search.scss"
import { SearchOutline } from 'antd-mobile-icons'
import { hotword, searchlist } from '../apis/search'
import { debounce } from '../utils/debounce'
import { DropdownRef } from 'antd-mobile/es/components/dropdown'
export default function Secher() {
    const navigate = useNavigate()
    const ref = useRef<DropdownRef>(null)
    const [value, setvalue] = useState(" ")
    const [hotdata, sethotdata] = useState([])
    const [searchlists, setsearchlists] = useState<any>([])
    // const [historydata, sethistorydata] = useState<any>([])
    useEffect(() => {
        hotlist()
    }, [])

    // useEffect(() => {
    //     console.log(searchlists === '');
    // }, [searchlists])

    let hotlist = async () => {
        let res = await hotword()
        sethotdata(res.data)
        console.log(res);
    }
    let change = async (v: any = value) => {
        console.log(v);

        let res: any = await searchlist(1, 10, v)
        console.log(res);

        if (res.code === "200") {
            setsearchlists(res.data)
        } else {
            setsearchlists([])
        }

        // if(historydata.indexOf(value)==-1){
        //     sethistorydata([...historydata,value])
        // }
    }

    let up = () => {
        searchlists.sort((a: any, b: any) => a.originprice - b.originprice)
        hotlist()
    }
    let down = () => {
        searchlists.sort((a: any, b: any) => b.originprice - a.originprice)
        hotlist()
    }

    let onFinish = (v: any) => {
        let arr = searchlists.filter((item: any) => {
            return item.originprice >= Number(v.min) && item.originprice <= Number(v.max)
        })
        setsearchlists(arr)
        ref.current?.close()
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}
                style={{
                    '--height': '46px',
                    '--border-bottom': '1px #eee solid',
                    backgroundColor: "#fff"
                }}
                right={<Button color='danger' onClick={() => change()}>搜索</Button>}
            >
                <input type="text" value={value} placeholder='清风抽纸' onChange={(v)=>{setvalue(v.target.value);debounce(change(value), 2000); } }/>
                <SearchOutline fontSize={20} />
            </NavBar>


            {/* <p style={{ display: historydata =="" ? "none" : "block" }}>历史记录</p> */}

            {
                searchlists.length ===  0 && (searchlists.length === 0 || value === "") ?
                    <div className="hotword">
                        <p>热门搜索</p>
                        <div className='content'>
                            {
                                hotdata.map((item: any) => {
                                    return (
                                        <div className="item" key={item.wordid} onClick={() => { change(item.keyword) }}>
                                            {item.keyword}
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    :
                    <>
                        <Dropdown ref={ref}>
                            <Dropdown.Item key='sorter' title='排序'>
                                <Radio.Group defaultValue='default'>
                                    <Radio block value='default' onChange={() => { change() }}>
                                        综合排序
                                    </Radio>
                                    <Radio block value='nearest' onChange={() => { up() }}>
                                        价格升序
                                    </Radio>
                                    <Radio block value='top-rated' onChange={() => { down() }}>
                                        价格降序
                                    </Radio>
                                </Radio.Group>
                            </Dropdown.Item>
                            <Dropdown.Item key='bizop' title='商机筛选'>
                                <div style={{ padding: 12 }}>
                                    <Form
                                        name='form'
                                        onFinish={onFinish}
                                        footer={
                                            <Button block type='submit' color='danger' shape='rounded' size='small'>
                                                提交
                                            </Button>
                                        }
                                    >

                                        <Form.Item name='min' >
                                            <Input placeholder='自定义最低价' />
                                        </Form.Item>
                                        <p>—</p>
                                        <Form.Item name='max' >
                                            <Input placeholder='自定义最高价' />
                                        </Form.Item>
                                    </Form>
                                </div>
                            </Dropdown.Item>
                        </Dropdown>
                        <div className="list">
                            {
                                searchlists &&
                                searchlists.map((item: any) => {
                                    return (
                                        <div className="item" key={item.proid} onClick={() => { navigate("/details", { state: { proid: item.proid } }) }}>
                                            <img src={item.img1} alt="" />
                                            <div className="info">
                                                <div className="name">{item.proname}</div>
                                                <div className="price">
                                                    <p>￥<span>{item.originprice}</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </>
            }
        </div>
    )
}
